{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/shopdetail.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>购物详情</p>
            </div>
        </div>
    </div>
</header>
<!-- 购物详情 -->
<div class="shoplist normalBox">
    <div class="container shopwrap">
        <table>
            <tr>
                <td class="letd">
                    <img class="img-responsive" src="{$details.card_img}" alt=""/>
                </td>
                <td>
                    <div class="carwrap">
                        <!--购物车-->
                        <div class="carbox">
                            <a href="{:url('/home/Shop/cart')}">
                                <img src="__PUBLIC__phone/images/car.png" alt=""/>
                                <span>{$cart}</span>
                            </a>
                        </div>
                        <div class="titlebox">
                            <p> <span>{$details.operator_type}</span> <span>{$details.total}/{$details.pkg_kind_text}</span></p>
                            <p> <span>套餐价格</span> <span>￥{$details.pkg_price}</span></p>
                        </div>
                        <!--材质规格-->
                        <div class="specbox" id="material">
                            <p>材质规格</p>
                            {volist name="details.material" id="ma" key="k"}
                            {if condition="$k eq '1'"}
                            <div class="specwrap active" data-value="{$ma.id}">
                            {else/}
                                <div class="specwrap" data-value="{$ma.id}">
                            {/if}
                                <p>{$ma.specification}</p>
                                <p>{$ma.price}元/张</p>
                            </div>
                            {/volist}
                        </div>
                        <!--卡片类型-->
                        <div class="specbox" id="type">
                            <p>卡片类型</p>
                            <div class="specwrap text-center active" data-value="2">
                                <p>单卡</p>
                                <p>加入套餐单卡不共享</p>
                            </div>
                            {if condition="$details['pkg_kind'] eq '0'"}
                            <div class="specwrap text-center" data-value="1">
                                <p>流量池卡</p>
                                <p>加入套餐流量池共享</p>
                            </div>
                            {/if}
                        </div>
                        <!--订购周-->
                        <div class="orderbox">
                            {if condition="$details['pkg_kind'] eq '0'"}
                            <p>订购周期 <span>* 最低订购周期为3个月</span></p>
                            <div class="addbox">
                                <button class="btn btn-default" data-id="dec">-</button>
                                <input type="text" name="cycle" value="3"/>
                                <button class="btn btn-default" data-id="inc">+</button>
                                <span>月</span>
                            </div>
                            {else/}
                            <p>订购周期<span>*跨月套餐默认订购一个周期</span></p>
                            {/if}
                        </div>
                        <div class="orderbox">
                            <p>卡片数量</p>
                            <div class="addbox">
                                <button class="btn btn-default" data-id="dec">-</button>
                                <input type="text" name="number" value="1"/>
                                <button class="btn btn-default" data-id="inc">+</button>
                                <span>张</span>
                            </div>
                        </div>
                        <!--加入购物车-->
                        <div class="addcar">
                            <a data-toggle="modal">加入购物车</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <!--参数说明-->
        <div class="illustrate">
            <p>参数说明</p>
            <ul>
                {volist name='details.text' id='te'}
                <li>{$te}</li>
                {/volist}
            </ul>
        </div>
    </div>
</div>
<!--弹出层-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body text-center">
                已成功加入购物车
            </div>
            <div class="modal-footer">
                <a href="{:url('/home/Shop/index')}"  class="btn btn-default goshop">继续购物</a>
                <a href="{:url('/home/Shop/cart')}"  class="btn goshoped ">去购物车</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__phone/js/shoplist.js"></script>
<script type="text/javascript">
    $(function(){
        $('.addcar').on('click','a',function(){
            // 获取数据
            var dConf = {
                'material':$('#material').find('.active').data('value'),
                'type':$('#type').find('.active').data('value'),
                'cycle':$('input[name="cycle"]').val(),
                'number':$('input[name="number"]').val(),
            };
            if(!dConf['material']){   // 材质规格
                reminder('请选择材质规格！');
                return false;
            }
            if($.inArray(dConf['type'],[1,2]) < 0){   // 卡片类型
                reminder('请选择卡片类型！');
                return false;
            }
            var pType = "<?php echo $details['pkg_kind']; ?>";
            if(pType == '0' && dConf['cycle'] < 3){   // 订购周期
                reminder('月套餐的最小订购周期为3个月！');
                return false;
            }
            if(dConf['number'] < 1){   // 购卡数量
                reminder('卡片订购数量至少一张！');
                return false;
            }
            dConf['id'] = "<?php echo $details['id']; ?>";
            var cardbox = $('.carbox span');
            $.post("{:url('/home/Shop/addToCart')}",dConf,function(data){
                if(data.code){
                    reminder(data.msg);
                } else {
                    cardbox.text(parseInt(cardbox.text()) + data.new_cart);   // 购物车数量改变
                    $('#myModal').modal('show');
                }
            })
        })
    })
</script>
</body>
</html>